<template>
  <div class="search-form-container">
    <el-card class="search-card">
      <el-form :model="searchForm" label-width="80px" class="search-form">
        <el-row :gutter="20">
          <!-- 目的地 -->
          <el-col :span="6">
            <el-form-item label="目的地">
              <el-input
                v-model="searchForm.destination"
                placeholder="请输入目的地"
                clearable
              />
            </el-form-item>
          </el-col>
          
          <!-- 入住时间 -->
          <el-col :span="6">
            <el-form-item label="入住时间">
              <el-date-picker
                v-model="searchForm.checkIn"
                type="date"
                placeholder="选择入住时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled-date="disabledDate"
              />
            </el-form-item>
          </el-col>
          
          <!-- 退房时间 -->
          <el-col :span="6">
            <el-form-item label="退房时间">
              <el-date-picker
                v-model="searchForm.checkOut"
                type="date"
                placeholder="选择退房时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled-date="disabledDate"
              />
            </el-form-item>
          </el-col>
          
          <!-- 房间数 -->
          <el-col :span="3">
            <el-form-item label="房间数">
              <el-select v-model="searchForm.rooms" placeholder="房间">
                <el-option
                  v-for="item in roomOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          
          <!-- 人数 -->
          <el-col :span="3">
            <el-form-item label="人数">
              <el-select v-model="searchForm.guests" placeholder="人数">
                <el-option
                  v-for="item in guestOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <!-- 关键词搜索 -->
          <el-col :span="12">
            <el-form-item label="关键词">
              <el-input
                v-model="searchForm.keywords"
                placeholder="酒店名称、设施等关键词"
                clearable
              />
            </el-form-item>
          </el-col>
          
          <!-- 价格范围 -->
          <el-col :span="6">
            <el-form-item label="价格范围">
              <el-select v-model="searchForm.priceRange" placeholder="价格范围">
                <el-option label="不限" value="" />
                <el-option label="¥200以下" value="0-200" />
                <el-option label="¥200-500" value="200-500" />
                <el-option label="¥500-1000" value="500-1000" />
                <el-option label="¥1000以上" value="1000+" />
              </el-select>
            </el-form-item>
          </el-col>
          
          <!-- 搜索按钮 -->
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" size="large" @click="handleSearch" :loading="searching">
                <el-icon><Search /></el-icon>
                搜索酒店
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['search'])

const searching = ref(false)

const searchForm = reactive({
  destination: '',
  checkIn: '',
  checkOut: '',
  rooms: 1,
  guests: 2,
  keywords: '',
  priceRange: ''
})

const roomOptions = [
  { label: '1间', value: 1 },
  { label: '2间', value: 2 },
  { label: '3间', value: 3 },
  { label: '4间', value: 4 },
  { label: '5间', value: 5 }
]

const guestOptions = [
  { label: '1人', value: 1 },
  { label: '2人', value: 2 },
  { label: '3人', value: 3 },
  { label: '4人', value: 4 },
  { label: '5人', value: 5 },
  { label: '6人', value: 6 }
]

const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7 // 禁用今天之前的日期
}

const handleSearch = async () => {
  if (!searchForm.destination.trim()) {
    ElMessage.warning('请输入目的地')
    return
  }
  
  if (!searchForm.checkIn || !searchForm.checkOut) {
    ElMessage.warning('请选择入住和退房时间')
    return
  }
  
  if (new Date(searchForm.checkIn) >= new Date(searchForm.checkOut)) {
    ElMessage.warning('退房时间必须晚于入住时间')
    return
  }
  
  searching.value = true
  
  // 模拟搜索请求
  setTimeout(() => {
    emit('search', { ...searchForm })
    ElMessage.success('搜索完成！')
    searching.value = false
  }, 1000)
}
</script>

<style scoped>
.search-form-container {
  padding: 20px;
  background: #f5f7fa;
}

.search-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.search-form {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  width: 100%;
  height: 40px;
}

.el-input,
.el-select,
.el-date-picker {
  width: 100%;
}
</style>

